/***********************************************************************************
 *                                                                                  *
 * arrow-box
 *                                                                                  *
 ***********************************************************************************/
@media screen and (min-width: 980px) {
  .arrow-box {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
    text-align: left;
    .item {
      display: block;
      letter-spacing: 0;
      margin-top: 20px;
      width: 95%;
      &:nth-of-type(1) {
        margin-top: 0;
      }
    }
    .link {
      position: relative;
      display: block;
      width: 100%;
      height: 2em;
      line-height: 1em;
      padding: .5em 0 .5em 1em;
      box-sizing: border-box;
      background-color: rgba(0, 0, 0, 0.8);
      color: rgba(255, 255, 255, .6);
      transition: 300ms all linear 0ms;
      &:hover {
        background-color: rgba(0, 0, 0, 1);
        color: rgba(255, 255, 0, 1);
        &:after {
          border-color: transparent transparent transparent rgba(0, 0, 0, 1);
        }
      }
      &:before {
        content: '';
        position: absolute;
        top: 50%;
        left: -1.5em;
        transform: translate(0, -50%);
        width: 1.5em;
        height: 3em;
        border-radius: 1em 0 0 1em;
        background-color: rgba(240, 160, 80, 1);
        z-index: 1;
      }
      &:after {
        content: '';
        position: absolute;
        top: 50%;
        right: -3em;
        transform: translate(0, -50%);
        width: 0;
        height: 0;
        border: 1.5em solid;
        transition: 300ms all linear 0ms;
        border-color: transparent transparent transparent rgba(0, 0, 0, 0.8) ;
      }
    }
  }
}

@media screen and (max-width: 979px) {
  .arrow-box {
    padding: 20px 20px 30px;
    .item {
      display: block;
      font-size: 0;
      border-radius: 6px;
      overflow: hidden;
      &:nth-of-type(n+2) {
        margin-top: 10px;
      }
    }
    .link {
      display: block;
      padding: 4px 10px;
      background-color: rgba(0, 0, 0, 0.8);
      color: rgba(255, 255, 255, .6);
      font-size: 14px;
      line-height: 1.5;
    }
  }
}
